<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <table class="table">
            <caption>文章表</caption>
            <thead>
                <tr>
                    <td>id</td>
                    <td>title</td>
                    <td>author</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <!-- 布局类名 -->
        <div class="row">
            <div class="col-md-8">1</div>
            <div class="col-md-4">2</div>
        </div>
        <form name="postForm">
            <div class="form-group">
                <label for="titleInput">标题</label>
                <input type="text" class="form-control" name="title" id="titleInput" placeholder="请输入标题" required>
            </div>
            <div class="form-group">
                <label for="authorInput">作者</label>
                <input type="text" class="form-control" name="author" id="authorInput" placeholder="请输入作者" required>
            </div>
            <button type="submit" class="btn btn-default">添加</button>
        </form>
        <a href="www.baidu.com" id="link">TEST event.preventDefault()</a>
    </div>

    <script>
        const oLink = document.getElementById('link');
        oLink.addEventListener('click', function (event) {
            console.log('event.preventDefault()生效');
            event.preventDefault();
        })
        // 功能抽象 post对象变成 tr 的html字符串
        const getPostHtml = (post) =>
            `
                    <tr>
                        <td>${post.id}</td>
                        <td>${post.title}</td>
                        <td>${post.author}</td>
                    </tr>
            `

        let id = 3;
        const oForm = document.forms['postForm'];
        const oTBody = document.querySelector('table tbody');
        oForm.addEventListener('submit', function (event) {
            // console.log('form 默认会向后端提交数据');
            event.preventDefault();
            const title = oForm["title"].value.trim();// trim()去除前后空格 
            const author = oForm["author"].value.trim();
            oTBody.innerHTML +=
                getPostHtml({
                    id,
                    title,
                    author
                });
            id++;
            // 清空充值表单
            oForm.reset();
        });

        fetch('http://localhost:3000/posts')
            .then(data => data.json())
            .then(data => {
                // 前后端通信数据格式 json
                // console.log(data);
                oTBody.innerHTML =
                    data.map(post => getPostHtml(post))
                        .join('')
            })
    </script>
</body>

</html>